<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Button, Card, List, Space, Tag, Timeline } from 'ant-design-vue';

const loading = ref(false);
const movements = ref<any[]>([]);

// 加载库存移动数据
const loadMovements = async () => {
  loading.value = true;
  try {
    // 模拟库存移动数据
    const mockMovements = [
      {
        id: '1',
        resourceName: '投影设备',
        movementType: 'IN',
        quantity: 1,
        fromLocation: '供应商仓库',
        toLocation: '设备间',
        reason: '新设备入库',
        operator: '张管理员',
        timestamp: '2024-03-15 14:30',
        status: 'COMPLETED',
      },
      {
        id: '2',
        resourceName: '办公用品',
        movementType: 'OUT',
        quantity: 50,
        fromLocation: '仓库A',
        toLocation: '办公区',
        reason: '日常领用',
        operator: '李助理',
        timestamp: '2024-03-15 10:15',
        status: 'COMPLETED',
      },
      {
        id: '3',
        resourceName: '按摩床',
        movementType: 'TRANSFER',
        quantity: 2,
        fromLocation: '温泉区',
        toLocation: '医美区',
        reason: '业务调整',
        operator: '王经理',
        timestamp: '2024-03-15 09:00',
        status: 'IN_PROGRESS',
      },
      {
        id: '4',
        resourceName: '清洁用品',
        movementType: 'IN',
        quantity: 100,
        fromLocation: '供应商',
        toLocation: '仓库B',
        reason: '补货',
        operator: '赵采购',
        timestamp: '2024-03-14 16:45',
        status: 'COMPLETED',
      },
      {
        id: '5',
        resourceName: '培训材料',
        movementType: 'OUT',
        quantity: 30,
        fromLocation: '仓库A',
        toLocation: '培训室',
        reason: '培训使用',
        operator: '孙老师',
        timestamp: '2024-03-14 14:20',
        status: 'COMPLETED',
      },
    ];

    movements.value = mockMovements;
  } catch (error) {
    console.error('加载库存移动数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// 确认移动
const confirmMovement = (movementId: string) => {
  console.log('确认移动:', movementId);
  const movement = movements.value.find((m) => m.id === movementId);
  if (movement) {
    movement.status = 'COMPLETED';
  }
};

// 取消移动
const cancelMovement = (movementId: string) => {
  console.log('取消移动:', movementId);
  movements.value = movements.value.filter((m) => m.id !== movementId);
};

// 辅助函数
const getMovementTypeColor = (type: string) => {
  const colors = {
    IN: 'green',
    OUT: 'red',
    TRANSFER: 'blue',
    ADJUSTMENT: 'orange',
  };
  return colors[type as keyof typeof colors] || 'default';
};

const getMovementTypeLabel = (type: string) => {
  const labels = {
    IN: '入库',
    OUT: '出库',
    TRANSFER: '转移',
    ADJUSTMENT: '调整',
  };
  return labels[type as keyof typeof labels] || type;
};

const getStatusColor = (status: string) => {
  const colors = {
    COMPLETED: 'green',
    IN_PROGRESS: 'blue',
    PENDING: 'orange',
    CANCELLED: 'red',
  };
  return colors[status as keyof typeof colors] || 'default';
};

const getStatusLabel = (status: string) => {
  const labels = {
    COMPLETED: '已完成',
    IN_PROGRESS: '进行中',
    PENDING: '待处理',
    CANCELLED: '已取消',
  };
  return labels[status as keyof typeof labels] || status;
};

onMounted(() => {
  loadMovements();
});
</script>

<template>
  <Card title="库存移动记录" :bordered="false">
    <div class="inventory-movement">
      <div class="movement-header">
        <div class="movement-count">
          <IconifyIcon icon="mdi:package-variant" />
          <span>最近 {{ movements.length }} 条移动记录</span>
        </div>
        <Button size="small" @click="loadMovements" :loading="loading">
          刷新
        </Button>
      </div>

      <div v-if="movements.length > 0" class="movement-timeline">
        <Timeline>
          <Timeline.Item
            v-for="movement in movements"
            :key="movement.id"
            :color="getMovementTypeColor(movement.movementType)"
          >
            <div class="movement-item">
              <div class="movement-header">
                <div class="movement-info">
                  <h4>{{ movement.resourceName }}</h4>
                  <Space>
                    <Tag :color="getMovementTypeColor(movement.movementType)">
                      {{ getMovementTypeLabel(movement.movementType) }}
                    </Tag>
                    <Tag :color="getStatusColor(movement.status)">
                      {{ getStatusLabel(movement.status) }}
                    </Tag>
                  </Space>
                </div>
                <div class="movement-time">
                  {{ movement.timestamp }}
                </div>
              </div>

              <div class="movement-details">
                <div class="movement-quantity">
                  数量: <strong>{{ movement.quantity }}</strong>
                </div>
                <div class="movement-location">
                  <span v-if="movement.movementType === 'TRANSFER'">
                    {{ movement.fromLocation }} → {{ movement.toLocation }}
                  </span>
                  <span v-else-if="movement.movementType === 'IN'">
                    → {{ movement.toLocation }}
                  </span>
                  <span v-else> {{ movement.fromLocation }} → </span>
                </div>
                <div class="movement-reason">原因: {{ movement.reason }}</div>
                <div class="movement-operator">
                  操作人: {{ movement.operator }}
                </div>
              </div>

              <div
                v-if="movement.status === 'IN_PROGRESS'"
                class="movement-actions"
              >
                <Space>
                  <Button
                    size="small"
                    type="primary"
                    @click="confirmMovement(movement.id)"
                  >
                    确认
                  </Button>
                  <Button size="small" @click="cancelMovement(movement.id)">
                    取消
                  </Button>
                </Space>
              </div>
            </div>
          </Timeline.Item>
        </Timeline>
      </div>

      <div v-else-if="!loading" class="no-movements">
        <IconifyIcon icon="mdi:package-variant-closed" size="48" />
        <p>暂无移动记录</p>
      </div>
    </div>
  </Card>
</template>

<style scoped>
.inventory-movement {
  padding: 16px;
}

.movement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.movement-count {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1890ff;
  font-weight: 500;
}

.movement-timeline {
  max-height: 400px;
  overflow-y: auto;
}

.movement-item {
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  margin-bottom: 12px;
  background: #fafafa;
}

.movement-item .movement-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  border: none;
  padding: 0;
  background: transparent;
}

.movement-info h4 {
  margin: 0 0 8px 0;
  color: #1890ff;
}

.movement-time {
  font-size: 12px;
  color: #999;
}

.movement-details {
  margin-bottom: 12px;
}

.movement-quantity,
.movement-location,
.movement-reason,
.movement-operator {
  margin-bottom: 4px;
  font-size: 13px;
  color: #666;
}

.movement-quantity strong {
  color: #1890ff;
}

.movement-location {
  color: #52c41a;
}

.movement-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.no-movements {
  padding: 40px 20px;
  text-align: center;
  color: #999;
}

.no-movements p {
  margin-top: 16px;
  font-size: 14px;
}
</style>
